<template>
  <div class="core">
    <!-- <div v-if="!isShow">
      <a-tooltip>
        <template slot="title"> AI智辅 </template>
        <img class="core_robatimg cursor_pointer" src="@/assets/images/AI.png" alt="ai机器人" @click="showInput()" />
      </a-tooltip>
      <div style="position: absolute; top: 58px; right: 175px; font-size: 16px; color: #000">AI智辅</div>
    </div> -->

    <a-tooltip v-if="isShow">
      <template slot="title"> 发送 </template>
      <img
        class="core_robatsend cursor_pointer"
        src="~@/assets/icons/base/robat-send.svg"
        alt="发送"
        @click="sendInput()"
      />
    </a-tooltip>

    <!-- ai输入框 -->
    <div v-if="isShow" @click="showInput()" class="core_close cursor_pointer"><a-icon type="close" /></div>

    <div :class="'core_input fade' + `${isShow ? ' core_input_active' : ' core_input_disable'}`">
      <a-spin :spinning="loading">
        <a-textarea v-if="isShow" v-model="question" placeholder="输入您的问题" />
      </a-spin>
    </div>
  </div>
</template>
<script>
import { aiSearch } from '@/api/base/chatRobot.js'
export default {
  data () {
    return {
      loading: false, // 输入框加载状态
      question: undefined,
      isShow: false // 显示输入框
    }
  },
  created () {},
  methods: {
    // 请求ai服务
    async sendInput () {
      console.log('查询', this.question)
      if (!this.question) {
        this.$message.warning('请输入要查询的问题！')
        return
      }
      this.loading = true
      const { data } = await aiSearch(this.question).finally(() => {
        this.loading = false
      })
      // this.question = data
      // console.log('data', data)
      this.question = ''
      this.typewriter(0, data)
    },
    // 输入框显示切换
    showInput () {
      this.isShow = !this.isShow
      this.question = undefined
    },
    // 打字机方法
    typewriter (exlength = 0, result) {
      // console.log('exlength', exlength)
      // debugger
      this.question = this.question + result.substring(exlength, exlength + 1)
      // debugger
      // console.log('*-*', result.substring(exlength, 1))
      // console.log('this.question', this.question)
      if (exlength != result.length) {
        setTimeout(() => {
          this.typewriter(this.question.length, result)
        }, 50)
      }
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .ant-input {
  height: 100%;
  border: none;
  background: rgb(250, 246, 246);
  padding: 10px 20px;
}
// 加载容器
::v-deep .ant-spin-container {
  height: 300px;
}
.core {
  // border: 1px solid red;
  &_robatimg,
  &_close,
  &_robatsend {
    width: 10px;
    // height: 60px;
    position: fixed;
    right: 30px;
    z-index: 2;
  }
  &_robatsend {
    width: 50px;
    height: 50px;
    bottom: 100px;
    right: 36px;
  }
  &_robatimg {
    width: 24px;
    top: 132px;
    right: 250px;
  }

  &_close {
    width: 20px;
    height: 20px;
    bottom: 378px;
    display: inline;
  }
  &_input {
    position: fixed;
    bottom: 100px;
    right: 30px;
    z-index: 1;
    border-radius: 10px;
    // box-shadow: 5px 5px 5px 1px #ccc;
    height: 300px;
    margin-top: -10px;
    // padding: 10px 20px;
    &_active {
      width: 30%;
    }
    &_disable {
      width: 0%;
    }
  }
}
.fade {
  transition: all 0.6s;
}
</style>
